import React, { useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Form, Button, Input, DatePicker, InputNumber, message, Modal } from 'antd'
import OperaPrompt from '@/components/OperaPrompt'
import request from '@/utils/request';
import styles from "./save.less"
import Selector from './selector'
import { CloudUploadOutlined } from '@ant-design/icons'



const save = () => {

    const [visable, setVisable] = useState(false);

    const closeModal = () => {
        setVisable(false);
    };

    const [skuList, setSkuList] = useState<any[]>([])

    // const [data, setData] = useState({
    //     goods_logo: "",
    //     goods_title: "",
    //     goods_price: ""
    // })


    // const selectFinish = (selectedGoods: any) => {
    //     setData({
    //         goods_logo: selectedGoods.goods_logo,
    //         goods_title: selectedGoods.goods_title,
    //         goods_price: selectedGoods.goods_price
    //     })
    // }
    const onFinish = (values: any) => {
        values['start_time'] = values['start_time'].format('YYYY-MM-DD HH:mm:ss');
        values['end_time'] = values['end_time'].format('YYYY-MM-DD HH:mm:ss');
        values['sku_list'] = skuList
        request(`/promote/group_buy/save/0`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            message.success(result.message, 1, () => {

            })
            // getList()
        })
    };

    const selectFinish = (selectedGoods: any) => {
        if (!Array.isArray(selectedGoods.sku_list)) {
            return
        }
        console.log(selectedGoods);
        let data = selectedGoods.sku_list.map((item: any) => ({
            sku_title: item.sku_title,
            sale_price: item.sale_price,
            sku_id: item.id,
            group_price: "",
            leader_price: "",
            goods_id: selectedGoods.id,
        }))
        setSkuList(data)
    }

    const skuInput = (skuId: number, val: string) => {
        let result: any[] = skuList.map((item: any) => {
            return item.sku_id === skuId ? { ...item, group_price: val } : item
        })
        setSkuList(result)
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card bordered={false}>

                <OperaPrompt dataList={[
                    "管理员可以在此页添加团购活动"
                ]} />
                <div style={{ paddingTop: "12px" }}>
                    <Form
                        labelCol={{ span: 3 }}
                        onFinish={onFinish}
                    >
                        <Form.Item label="商品信息" required>
                            <table className={styles.myTable}>
                                <thead>
                                    <tr >
                                        <td>商品名称</td>
                                        <td>商品价格(元)</td>
                                        <td>拼团价格(元)</td>

                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        skuList.map((item: any, inx: number) =>
                                            <tr key={inx}>
                                                <td>{item.sku_title}</td>
                                                <td>￥{item.sale_price}</td>
                                                <td>
                                                    <Input value={item.group_price} onChange={(e) => { skuInput(item.sku_id, e.target.value) }} />
                                                </td>
                                            </tr>
                                        )
                                    }
                                </tbody>
                            </table>
                            <Button type="primary" onClick={() => { setVisable(true) }}>选择商品</Button>
                        </Form.Item>

                        <Form.Item label="最低购买数量" name="min_buy" help="最低购买数量不能小于2，默认为2">
                            <InputNumber />
                        </Form.Item>
                        <Form.Item label="开始时间" required name="start_time">
                            <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime />
                        </Form.Item>
                        <Form.Item label="结束时间" required name="end_time" help="结束时间不能小于开始时间，也不能小于当前时间">
                            <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 3 }}>
                            <Button type="primary" htmlType="submit">保存</Button>
                            <Button style={{ marginLeft: "8px" }} onClick={() => {
                                history.back()
                            }}>返回</Button>
                        </Form.Item>
                    </Form>
                </div>
            </Card>
            <Modal
                title="商品选择"
                width="60%"
                visible={visable}
                onCancel={closeModal}
                footer={null}
            >
                <Selector close={closeModal} idList={[]} selectFinish={selectFinish} />
            </Modal>
        </PageHeaderWrapper>
    );
};

export default save;